<template>
	<view class="userList">
		<view class="cont" v-for="(item,i) in userList" :key="i">
			<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png"></image>
			<view class="middle">
				<view class="name">{{item.name}}</view>
				<view class="phone">{{item.phone}}</view>
			</view>
			<view :class="item.level == 1 ? 'level tourist' : 'level'">{{switchLevel(item.level)}}</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserList
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				userList: [{
					imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
					name: '测试用户',
					phone: '15555555555',
					level: 1
				},{
					imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
					name: '测试用户',
					phone: '15555555555',
					level: 2
				},{
					imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
					name: '测试用户',
					phone: '15555555555',
					level: 1
				}]
			}
		},
		onLoad() {
			this.getUserList()
		},
		methods: {
			async getUserList(){
				const {
					data: res
				} = await getUserList()
				console.log(res,333333333333333)
				this.userList = res.data
			},
			switchLevel(id) {
				switch (id) {
					case 1:
						return '游客'
					case 2:
						return '普通会员'
					case 3:
						return '银卡会员'
					case 4:
						return '金卡会员'
					case 5:
						return '白金卡会员'
				}
			},
		}
	}
</script>

<style lang="less">
	.userList {
		margin: 32rpx;

		.cont {
			display: flex;
			align-items: center;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			line-height: 1;
			margin-bottom: 32rpx;

			image {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				margin-right: 18rpx;
			}

			.middle {
				.name {
					font-size: 28rpx;
					color: #171717;
					margin-top: 4rpx;
				}

				.phone {
					font-size: 24rpx;
					color: #A4A4A4;
					margin-top: 15rpx;
				}
			}

			.level {
				padding: 0 18rpx;
				height: 34rpx;
				background: rgba(230, 0, 18, 0.1);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #E60012;
				line-height: 34rpx;
				margin-left: auto;
			}

			.tourist {
				background: #F6F6F6;
				color: #5B5B5B;
			}
		}
	}
</style>
